<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安全登录系统</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
            .card-shadow {
                @apply shadow-lg shadow-primary/10;
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-dark to-gray-800 min-h-screen flex items-center justify-center p-4 text-light">
    <!-- 主容器 -->
    <div class="w-full max-w-md">
        
        <!-- 登录表单卡片 -->
        <div id="login-card" class="bg-gray-900/90 backdrop-blur-sm rounded-2xl p-8 card-shadow transition-all duration-500 transform">
            <div class="text-center mb-8">
                <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-white mb-2">安全登录</h1>
                <p class="text-gray-400">请输入您的凭证进行登录</p>
            </div>
            
            <!-- 登录表单 -->
            <form id="login-form" class="space-y-6">
                <div class="space-y-2">
                    <label for="login-username" class="block text-sm font-medium text-gray-300">用户名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="login-username" name="username" 
                            class="w-full pl-10 pr-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white form-input-focus"
                            placeholder="请输入用户名" required>
                    </div>
                </div>
                
                <div class="space-y-2">
                    <div class="flex items-center justify-between">
                        <label for="login-password" class="block text-sm font-medium text-gray-300">密码</label>
                        <button type="button" id="show-change-password" 
                            class="text-sm text-primary hover:text-primary/80 transition-colors">
                            更改密码?
                        </button>
                    </div>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="login-password" name="password" 
                            class="w-full pl-10 pr-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white form-input-focus"
                            placeholder="请输入密码" required>
                        <button type="button" id="toggle-password" 
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-300 transition-colors">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>
                
                <button type="submit" 
                    class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center gap-2 btn-hover">
                    <i class="fa fa-sign-in"></i>
                    <span>登录</span>
                </button>
            </form>
            
            <!-- 登录状态消息 -->
            <div id="login-message" class="mt-4 hidden px-4 py-3 rounded-lg text-sm"></div>
        </div>
        
        <!-- 密码更改卡片 (默认隐藏) -->
        <div id="change-password-card" class="bg-gray-900/90 backdrop-blur-sm rounded-2xl p-8 card-shadow transition-all duration-500 transform scale-95 opacity-0 pointer-events-none absolute inset-0">
            <div class="flex items-center mb-6">
                <button type="button" id="back-to-login" 
                    class="text-gray-400 hover:text-white transition-colors mr-2">
                    <i class="fa fa-arrow-left text-lg"></i>
                </button>
                <h2 class="text-2xl font-bold text-white">更改密码</h2>
            </div>
            
            <!-- 密码更改表单 -->
            <form id="change-password-form" class="space-y-6">
                <div class="space-y-2">
                    <label for="current-password" class="block text-sm font-medium text-gray-300">当前密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="current-password" name="currentPassword" 
                            class="w-full pl-10 pr-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white form-input-focus"
                            placeholder="请输入当前密码" required>
                    </div>
                </div>
                
                <div class="space-y-2">
                    <label for="new-password" class="block text-sm font-medium text-gray-300">新密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-key"></i>
                        </span>
                        <input type="password" id="new-password" name="newPassword" 
                            class="w-full pl-10 pr-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white form-input-focus"
                            placeholder="请输入新密码" required>
                    </div>
                    <p id="password-strength" class="text-xs text-gray-500 mt-1">密码强度: 未输入</p>
                </div>
                
                <div class="space-y-2">
                    <label for="confirm-password" class="block text-sm font-medium text-gray-300">确认新密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-check-circle"></i>
                        </span>
                        <input type="password" id="confirm-password" name="confirmPassword" 
                            class="w-full pl-10 pr-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white form-input-focus"
                            placeholder="请再次输入新密码" required>
                    </div>
                    <p id="password-match" class="text-xs text-gray-500 mt-1">密码匹配: 未输入</p>
                </div>
                
                <button type="submit" 
                    class="w-full bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center gap-2 btn-hover">
                    <i class="fa fa-refresh"></i>
                    <span>更新密码</span>
                </button>
            </form>
            
            <!-- 密码更改状态消息 -->
            <div id="change-password-message" class="mt-4 hidden px-4 py-3 rounded-lg text-sm"></div>
        </div>
    </div>
    
    <!-- JavaScript逻辑 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const loginCard = document.getElementById('login-card');
            const changePasswordCard = document.getElementById('change-password-card');
            const showChangePasswordBtn = document.getElementById('show-change-password');
            const backToLoginBtn = document.getElementById('back-to-login');
            const togglePasswordBtn = document.getElementById('toggle-password');
            const loginPasswordInput = document.getElementById('login-password');
            const loginForm = document.getElementById('login-form');
            const changePasswordForm = document.getElementById('change-password-form');
            const loginMessage = document.getElementById('login-message');
            const changePasswordMessage = document.getElementById('change-password-message');
            const newPasswordInput = document.getElementById('new-password');
            const confirmPasswordInput = document.getElementById('confirm-password');
            const passwordStrengthIndicator = document.getElementById('password-strength');
            const passwordMatchIndicator = document.getElementById('password-match');
            
            // 切换到密码更改表单
            showChangePasswordBtn.addEventListener('click', function() {
                loginCard.classList.add('scale-95', 'opacity-0', 'pointer-events-none');
                setTimeout(() => {
                    loginCard.classList.add('absolute', 'inset-0');
                    changePasswordCard.classList.remove('scale-95', 'opacity-0', 'pointer-events-none');
                }, 300);
            });
            
            // 返回登录表单
            backToLoginBtn.addEventListener('click', function() {
                changePasswordCard.classList.add('scale-95', 'opacity-0', 'pointer-events-none');
                setTimeout(() => {
                    changePasswordCard.classList.add('absolute', 'inset-0');
                    loginCard.classList.remove('scale-95', 'opacity-0', 'pointer-events-none', 'absolute', 'inset-0');
                }, 300);
            });
            
            // 切换密码可见性
            togglePasswordBtn.addEventListener('click', function() {
                const type = loginPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                loginPasswordInput.setAttribute('type', type);
                togglePasswordBtn.innerHTML = type === 'password' ? '<i class="fa fa-eye"></i>' : '<i class="fa fa-eye-slash"></i>';
            });
            
            // 密码强度检查
            newPasswordInput.addEventListener('input', function() {
                const password = this.value;
                let strength = 0;
                
                // 密码长度检查
                if (password.length >= 8) strength++;
                // 包含数字检查
                if (/\d/.test(password)) strength++;
                // 包含小写字母检查
                if (/[a-z]/.test(password)) strength++;
                // 包含大写字母检查
                if (/[A-Z]/.test(password)) strength++;
                // 包含特殊字符检查
                if (/[^A-Za-z0-9]/.test(password)) strength++;
                
                // 显示密码强度
                let strengthText = '';
                let strengthColor = '';
                
                switch(strength) {
                    case 0:
                    case 1:
                    case 2:
                        strengthText = '弱';
                        strengthColor = 'text-danger';
                        break;
                    case 3:
                    case 4:
                        strengthText = '中';
                        strengthColor = 'text-yellow-500';
                        break;
                    case 5:
                        strengthText = '强';
                        strengthColor = 'text-secondary';
                        break;
                }
                
                passwordStrengthIndicator.textContent = `密码强度: ${strengthText}`;
                passwordStrengthIndicator.className = `text-xs mt-1 ${strengthColor}`;
                
                // 检查密码匹配
                checkPasswordMatch();
            });
            
            // 确认密码检查
            confirmPasswordInput.addEventListener('input', checkPasswordMatch);
            
            function checkPasswordMatch() {
                const newPassword = newPasswordInput.value;
                const confirmPassword = confirmPasswordInput.value;
                
                if (confirmPassword === '') {
                    passwordMatchIndicator.textContent = '密码匹配: 未输入';
                    passwordMatchIndicator.className = 'text-xs text-gray-500 mt-1';
                } else if (newPassword === confirmPassword) {
                    passwordMatchIndicator.textContent = '密码匹配: ✓';
                    passwordMatchIndicator.className = 'text-xs text-secondary mt-1';
                } else {
                    passwordMatchIndicator.textContent = '密码匹配: ✗';
                    passwordMatchIndicator.className = 'text-xs text-danger mt-1';
                }
            }
            
            // 显示消息函数
            function showMessage(element, message, isSuccess = true) {
                element.textContent = message;
                element.className = `mt-4 px-4 py-3 rounded-lg text-sm ${isSuccess ? 'bg-green-900/50 text-green-300 border border-green-800' : 'bg-red-900/50 text-red-300 border border-red-800'} flex items-center gap-2`;
                element.classList.remove('hidden');
                
                setTimeout(() => {
                    element.classList.add('hidden');
                }, 3000);
            }
            
            // 登录表单提交
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const username = document.getElementById('login-username').value;
                const password = document.getElementById('login-password').value;
                
                // 这里是模拟登录验证，实际应用中应该发送到服务器验证
                if (username && password) {
                    showMessage(loginMessage, '登录成功！正在重定向...', true);
                    
                    // 模拟登录成功后的重定向
                    setTimeout(() => {
                        alert('登录成功！这里会跳转到主页。');
                        // 实际应用中可以使用 window.location.href = '/dashboard' 进行重定向
                    }, 1500);
                } else {
                    showMessage(loginMessage, '请输入用户名和密码', false);
                }
            });
            
            // 密码更改表单提交
            changePasswordForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const currentPassword = document.getElementById('current-password').value;
                const newPassword = document.getElementById('new-password').value;
                const confirmPassword = document.getElementById('confirm-password').value;
                
                // 简单验证
                if (!currentPassword || !newPassword || !confirmPassword) {
                    showMessage(changePasswordMessage, '请填写所有字段', false);
                    return;
                }
                
                if (newPassword !== confirmPassword) {
                    showMessage(changePasswordMessage, '新密码和确认密码不匹配', false);
                    return;
                }
                
                if (newPassword.length < 8) {
                    showMessage(changePasswordMessage, '新密码长度至少为8个字符', false);
                    return;
                }
                
                // 这里是模拟密码更改，实际应用中应该发送到服务器
                showMessage(changePasswordMessage, '密码更改成功！', true);
                
                // 重置表单
                setTimeout(() => {
                    changePasswordForm.reset();
                    passwordStrengthIndicator.textContent = '密码强度: 未输入';
                    passwordStrengthIndicator.className = 'text-xs text-gray-500 mt-1';
                    passwordMatchIndicator.textContent = '密码匹配: 未输入';
                    passwordMatchIndicator.className = 'text-xs text-gray-500 mt-1';
                    
                    // 返回登录表单
                    backToLoginBtn.click();
                }, 1500);
            });
            
            // 添加动画效果：页面加载时的卡片淡入
            setTimeout(() => {
                loginCard.classList.remove('opacity-0');
            }, 100);
        });
    </script>
</body>
</html>